<template>
  <div>
      <h3>品牌供应商</h3>
      <ul>
          <li v-for="item in brandList" @click="goto(item.id)" :key='item.id'>
              <img :src="item.pic_url">
              <p>{{item.name}}</p>
              <span>{{item.floor_price | Rmb}}</span>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    props:['brandList'],
    mounted(){
        console.log(11,this.brandList);
    },
    methods:{
        goto(ids){
            this.$router.push({path:'/brand',query:{id:ids}})
        }
    }
}
</script>

<style lang='less' scoped>
    div{
        h3{
            text-align: center;
            margin: 10px;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 49%;
                font-size: 15px;
                position: relative;
                margin-top: 5px;
                img{
                    width: 100%;
                    height: auto;
                }
                p{
                    position: absolute;
                    top: 15px;
                    left: 5px;
                }
                span{
                    color: red;
                    position: absolute;
                    top: 35px;
                    left: 5px;
                }
            }
        }
    }
</style>